<template>
	<view>
		<view class="custom-head-navbar">
			<u-navbar title="群成员列表" :border-bottom="false" :title-bold="true"></u-navbar>
		</view>
		<view  class="content-body"  v-if="groupMemberList.length>0">
			<view class="u-p-l-30 u-p-r-30">
				<u-search  :height="70" @search="searchUser" @blur="searchUser" @clear="searchUser"
						placeholder="输入用户名" :show-action="false" shape="square"  v-model="searchWord"></u-search>
			</view>
			<view>
				<view class="grid-box">
					<view class="grid-body">
						<view class="mention-item" style="display: flex; align-items: center; margin-bottom: 34rpx; padding: 0 24rpx" v-for="item in groupMemberList"
            :key="item.id"
            @tap="clickUser(item)"
            >
            <image src="/static/svg/mention-check.svg" style="width: 42rpx; height: 42rpx; margin-right: 24rpx; " v-if="mainSelect.includes(item)"/>
            <image src="/static/svg/mention-uncheck.svg" style="width: 42rpx; height: 42rpx; margin-right: 24rpx; " v-else/>
            <static-image :src="item.user.avatar" :width="80" :height="80" :radius="12"></static-image>
            <view style="flex: 1; font-size: 36rpx; margin-left: 24rpx">{{ getUserNameOrRemark(item) }}</view>
          </view>
					</view>
				</view>
        <view style="height: 120rpx"></view>
        <view class="submit" style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 1; padding: 24rpx; background-color: #fff;">
          <u-button type="error" :disabled="!mainSelect.length" @tap="dropMember">删除</u-button>
        </view>
			</view>
		</view>
		<view v-else>
			<ls-loading text="数据加载中"  animation="rise"></ls-loading>
		</view>
	</view>
</template>

<script>
  import { $confirm } from '@/util/util'
	export default {
		data() {
			return {
        mainSelect: [],
				scrollViewHeight:0,
				chatGroupId:'',
				currentUserId:'',
				groupMemberList:[],
				optionType:0,
				customGirdItemStyle:{
					padding:'10rpx 0rpx',
				},
				adminCustomGirdItemStyle:{
					padding:'10rpx 0rpx',
					//borderRadius:'10rpx',
					backgroundColor:'#fef0f0'
				},
				searchWord:'',
			};
		},
		onLoad:function(option){
			this.scrollViewHeight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50;
			console.log("页面初始化参数",option);
			if(option.optionType){
				this.optionType=Number(option.optionType);
			}
      this.group_id = Number(option.chatGroupId)
			this.initData(option.chatGroupId);//获取通讯录好友
		},

		methods:{
      getUserNameOrRemark (item) {
        const user = this.vuex_contactOringinData.find((u) => {
          return u.to_user_id === item.user_id || u.from_user_id === item.user_id
        })
        if (user) {
          if (user.to_user_id === item.user_id) return user.to_remark || item.user.name
          return user.from_remark || item.user.name
        }
        return item.user.name
      },
			async initData(groupId){
				const res = await this.$u.api.chatGroup.getChatGroupInfo({id: groupId})
        if (res.code == 200) {
          this.groupMemberList = res.data.user_group_relations.filter(s => s.user_id !== this.vuex_userInfo.id && s.right !== 'REJECT');
          this.tempData=this.groupMemberList;
        }else {
          this.globalUtil.utilAlert("群成员获取失败");
        }
			},

      async dropMember () {
        await $confirm('确认从群里删除这些用户？')
        await this.$u.api.chatGroup.adminMemberDrop({
          group_id: this.group_id,
          relation_ids: this.mainSelect.map(s => s.id)
        })
        this.$u.toast('删除成功',1000)
        uni.setStorageSync('group-need-update', true)
        setTimeout(() => {
          uni.navigateBack({
            delta: 2
          })
        }, 1100)
      },
			clickUser(item){
        if (this.mainSelect.includes(item)) {
          this.mainSelect.splice(this.mainSelect.indexOf(item), 1);
        } else {
          this.mainSelect.push(item);
        }
			},
			showInfo:function(userInfo){
				let that=this;
				console.log("点击用户",userInfo);
				let userId= userInfo.userId;
				if(that.currentUserId==userId){
					return;
				}
				//根据userId去查询是否是好友
				let param={
					groupUserId:userId
				}
				that.$u.api.imUser.getGroupMemberInfo(param).then(res => {
				if(res.code==200){
					   let groupUserInfo= res.data;
					   //console.log("查询群成员信息结果",groupUserInfo);
					   if(groupUserInfo.isFriend){
						   that.$u.route({
						     url: '/pages/chat/friends/friendHome',
						     params:{
						   	  friendId:userId
						     },
						   })
					   }else{
						   console.log("不是朋友关系");
						   this.$u.route({
						   	url: '/pages/chat/friends/newFriendInfo',
						   	params: {newFriendInfo:encodeURIComponent(JSON.stringify(groupUserInfo)),fromPage:1}
						   });
					   }
					}
				})
				return;
			},
			//添加管理员
			changeGroupMemberType:function(userInfo){
				let that=this;
				let param={
					userId:userInfo.userId,
					chatGroupId:that.chatGroupId,
					memberType:1
				}
				console.log("添加群管理员",param);
				that.$u.api.chatGroup.changeGroupMemberType(param).then(res => {
					if (res.code == 200) {
						that.globalUtil.utilAlert("群管理员设置成功");
						that.initData();
						return;
					}else {
						that.globalUtil.utilAlert("群成员获取失败");
						return;
					}
				})
			},
			//搜索
			searchUser:function(value){
				let that=this;
				console.log("value",value);
				if(value&&value.length>0){
					let list=JSON.parse(JSON.stringify(that.tempData));
					that.groupMemberList=list.filter(function(userInfo){
						return userInfo.userName.indexOf(value)!=-1;
					});
				}
				else{
					that.groupMemberList=that.tempData;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
 .content-body{
		.scroll-Y{
			::-webkit-scrollbar{
				display: none;
				height: 0;
				width: 0;
			}
		}
		/* 九宫格start */
		.grid-box {
			//box-shadow: 1px 0px 1px 0px #D8D8D8;
			//text-align: center;
			//width: 100%;
			//margin: 10rpx 8rpx;
			background-color: #FFFFFF;
			border-radius: 10px;
			//border: 1rpx solid #D8D8D8;
		}

		.grid-body {
			padding: 30upx;
		}

		.grid-box .gird-item{
		   display: flex;
		   flex-direction: column;
		   justify-content:center;
		   align-items: center;
		   margin-bottom: 20upx;
		}

		.grid-box .image {
			width: 80upx;
			height: 80upx;
		}

		.grid-text {
			font-size: 28rpx;
			margin-top: 4rpx;
			color: $u-type-info;
			width: 120rpx;
			text-align: center;
		}

		.grid-box .text {
			font-size: 26upx;
			margin-top: 10upx;
			font-family: PingFangSC-Regular, PingFangSC;
			font-weight: 400;
			color: rgba(74, 74, 74, 1);
			line-height: 26 upx;
		}

		/deep/ .uni-grid-item__box.border-top {
			border-top: hidden;
		}

		/deep/ .uni-grid-item__box.border {
			border-bottom: hidden;
		  //  border-right: hidden;
		}

		.badge-icon {
			position: absolute;
			top: 1rpx;
			right: 10rpx;
			width: 30rpx;
			height: 30rpx;
			z-index: 10000;
			background-color: #fa3534;
			color:#FFFFFF;
			border-radius:15rpx;
			text-align: center;
			font-size: 20rpx;
		}
		/* 九宫格end */
	}
</style>
